<template>
  <div class="chart-content-wrapper scope-of-drug-use">
    <div class="medical-title-box">
      <span class="medical-title-name">{{reportName}}</span>
      <span class="title-bk-container"></span>
    </div>
    <div class="medical-help">
      <div class="drug-name">
        病种名称：{{drugName}}
      </div>
      <el-tooltip class="item" effect="dark" placement="left">
        <div slot="content" style="line-height:24px;" v-html="explain"></div>
        <svg class="searchBtn searchSvg medicalHelpSvg" viewBox="0 0 1024 1024">
          <path :d="svgPath.helpBtn"></path>
        </svg>
      </el-tooltip>
    </div>
    <div class="medical-chart-box">
      <div id="scope-of-drug-use" v-show="showChart" :style="{height:height-190+'px'}"></div>
    </div>
    <div class="medical-conclusion-box" v-show="showChart">
      <span>结论：</span>
      <div class="medical-conclusion-container">{{reportConclusion}}</div>
    </div>
  </div>
</template>
<script>
  import {svgPath,loadingOpt,getValue} from "../../../assets/js/utils";
  import {baseApiF} from "../../../api/api";
  import {bus} from '../../last/filter/js/bus'

  export default {
    props:['isChange','height'],
    data() {
      return {
        reportName:'用药范围',
        drugName:'帕金森综合症',
        svgPath,
        explain:'此图的说明',
        chooseColor:'rgba(255,215,105,0.8)',
        chooseColorS:'rgba(255,215,105,0)',
        reportConclusion:'',
        params:{},
        showChart:true,
      }
    },
    watch:{
      height(){

      },
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },201)
      }
    },
    activated(){
      this.getScatterData(this.params)
    },
    mounted() {
      let that = this;
      this.myChart = this.$echarts.init(document.getElementById('scope-of-drug-use'));
      bus.$on('sendDiseaseTypeFilter', (disFilter) => {
        this.params = disFilter
        this.drugName = disFilter.disDetail.disName;
        this.getScatterData(disFilter);
      });
      this.myChart.on('click',function(params){
        let drugsName = params.data[2];
        that.goToNext(that,drugsName);
      })
    },
    methods: {
      goToNext(that,drugsName){
        let data = {};
        data.areaCode = that.params.areaCode;
        data.areaName = that.params.areaCodeText;
        data.queryYear = that.params.queryYear;
        data.hospLevel = that.params.hospLevel;
        data.hospCode = that.params.hospCode;
        data.medicalTypeCode = that.params.medicalCategory;
        data.disName = that.params.disDetail.disName;
        data.disId = that.params.disDetail.disCode;
        data.resultLevel = that.params.resultLevel;
        data.medicalType = that.params.medicalCategoryName;
        data.drugsName = drugsName;
        that.$router.push({path:`/decision/medical-analysis/details-or-drug-expenditure-detail`,query:data})
      },
      getScatterData(params) {
        this.myChart.clear();
        let data = {};
        data.areaCode = params.areaCode;
        data.bingZhongId = params.disDetail.disCode;
        data.hospCode = params.hospCode;
        data.hospLevel = params.hospLevel;
        data.medicalCategory = params.medicalCategory;
        data.queryYear = params.queryYear;
        this.myChart.showLoading(loadingOpt)
        this.$axios.post(`${baseApiF()}person/pharmacyScope`,data).then(res=>{
          let json = res.data;
          if(json.code==0){
            this.showChart = true;
            this.explain = json.data.explain;
            this.reportName = json.data.reportName;
            this.reportConclusion = json.data.reportConclusion;
            this.myChart.hideLoading();
            this.drawScatter(json.data)
          }else{
            this.myChart.hideLoading();
            this.showChart = false;
          }
        })
      },
      drawScatter(json){
        let that = this;
        let option = {
            backgroundColor:'#1B2B44',
            grid:{
              top:30,
              bottom:75,
              left:100,
              // width:'80%'
            },
            visualMap: [ {
              left: 'right',
              top: 0,
              dimension: 4,
              min:json.minCost?json.minCost:0,
              max: json.maxCost,
              itemWidth: 30,
              itemHeight: 70,
              calculable: true,
              formatter: function (value) {
                 return `${Number(value.toFixed(2))}`
              },
              text: ['大小：次均费用'],
              precision: 2,
              textGap: 20,
              textStyle: {
                color: '#fff'
              },
              inRange: {
                symbolSize: [10, 70],
              },
              outOfRange: {
                symbolSize: 0,
                color: [`${that.chooseColorS}`]
              },
              controller: {
                inRange: {
                  color:[`${that.chooseColor}`],
                },
                outOfRange: {
                  color: [`${that.chooseColorS}`]
                }
              }
            },{
              left: 'right',
              top: 120,
              dimension: 5,
              min: json.minDosage?json.minDosage:0,
              max: json.maxDosage,
              itemHeight: 70,
              calculable: true,
              precision: 2,
              text: ['明暗：次均用量'],
              textGap: 20,
              formatter: function (value) {
                return   `${Number(value.toFixed(2))}`; // 范围标签显示内容。
              },
              textStyle: {
                color: '#fff'
              },
              inRange: {
                colorLightness: [0.8,0.4]
              },
              outOfRange: {
                symbolSize:0,
                color: [`${that.chooseColorS}`]
              },
              controller: {
                inRange: {
                  color:[`${that.chooseColor}`],
                },
                outOfRange: {
                  color: [`${that.chooseColorS}`]
                }
              }
            }],
            tooltip:{
              formatter:function(params){
                let data = params.data;
                return `
                      <p>药品名称：${data[2]==null?"":data[2]}</p>
                      <p>药品总金额：${getValue(data[1],'money')}</p>
                      <p>药品总用量：${data[3]}</p>
                      <p>次均费用：${getValue(data[4],'money')}</p>
                      <p>次均用量：${data[5]}</p>
                      <p>用药人次：${getValue(data[0],'frequency')}</p>
                      <p>用药人数：${getValue(data[6],'people')}</p>
                       <p style="color: #67ffdb;text-align: center;
                                line-height: 30px;height: 30px">单击图表查看详情</p>
                      `
              }
            },
            dataZoom: [
              {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                bottom:20,
              },
              {
                left: 40,
                id: 'dataZoomY',
                type: 'slider',
                yAxisIndex: [0],
              }
            ],
            yAxis: {
              name:'总金额（万元）',
              nameTextStyle:{
                color:'#fff',
              },
              axisLabel: {
                show: true ,// 显示x轴坐标数值
                formatter:function(val){
                  return `${Number((val/10000).toFixed(2))}`
                },
                textStyle: {
                  color: '#fff',
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#294363'
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color:'#27405e'
                }
              },
              scale:true,
            },
            xAxis: {
              name:'用药人次',
              nameTextStyle:{
                color:'#fff',
              },
              // scale:true,
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                show: false // 不显示x轴坐标的刻度
              },
              axisLine: {
                lineStyle: {
                  color: '#294363'
                }
              },
              splitLine: {
                show:false,
                lineStyle: {
                  type: 'dashed',
                  color:'#27405e'
                }
              },
            },
            series:[ {
              name: `用药范围`,
              data: json.scopes,
              type: 'scatter',
              color:that.chooseColor
            }]
          }
        ;
        this.myChart.setOption(option)
      },
    }
  }
</script>
<style scoped>
  @import '../../../assets/css/medical-analysis.css';
  .scope-of-drug-use{
    width:100%;
    height:100%;
  }
  .medical-help{
    clear:both;
    height:32px;
    line-height:32px;
    color:#fff;
    padding:10px 20px 10px 40px;
  }
  .drug-name{
    float:left;
  }
  .medicalHelpSvg{
    width:20px;
    /*margin-top:6px;*/
    height:20px;
    float:right;
    fill:#fff;
    cursor:pointer;
  }
  /*.medical-chart-box{*/
    /*background:url('../../../assets/img/noData.png') no-repeat center 50%;*/
    /*background-size:16%;*/
  /*}*/
</style>
